<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/admin/plugins/layui/css/layui.css" media="all">
    {css href="/static/admin/plugins/font-awesome/css/font-awesome.min.css" /}
    <link rel="stylesheet" href="/static/admin/css/font.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2611525_g54mxlnjlub.css">
    <link rel="stylesheet" href="/static/admin/css/xadmin.css">
    <link rel="stylesheet" href="/static/admin/css/okadmin/okadmin.css">
    <script type="text/javascript" src="/static/admin/plugins/jquery/jquery.min.js"></script>
    {js href="/static/admin/plugins/laydate/laydate.js" /}
    <script type="text/javascript" src="/static/admin/plugins/layui/layui.js"></script>
    {js href="/static/admin/js/admin.js" /}
    {js href="/static/admin/js/xadmin.js" /}
    {js href="/static/admin/plugins/xm-select/xm-select.js" /}
   
    <style>
        .layui-tree-btnGroup,
        .layui-tree-editInput {
            float: right !important;
        }

        .layui-form-switch {
            margin-top: 0;
        }

        #tree li::after {
            clear: both;
            content: '';
            display: table;
        }
    </style>
</head>

<body>
    <div class="ok-body">
        <div>
            <table class="layui-table layui-form" id="tree" lay-size="sm" lay-filter="tableFilter"></table>
        </div>
    </div>
    <script>
        layui.use(["okLayer", "okUtils", 'layer', "jquery", 'table', 'layer'], function () {
            let okLayer = layui.okLayer
                , okUtils = layui.okUtils
                , layer = layui.layer
                , $ = layui.jquery
                , table = layui.table ;
            let menuTable = table.render({
                id: 'tree',
                elem: '#tree',// 必须
                url: "{:addons_url('store://Category/getcategory')}",
                toolbar: "#toolbarTpl",
                treeColIndex: 2,
                treeSpid: 0,
                treeDefaultClose: true,
                treeIdName: 'id',
                treePidName: 'pid',
                cols: [[
                    {type: "checkbox", width: 50},
                    { field: 'id', width: 80, title: 'ID', sort: true, align: 'center', },
                    { field: 'pid', title: 'PID' },
                    { field: 'name', minWidth: 250, title: '菜单名' },
                    { field: 'is_enable', title: '显示' },
                    { field: "is_home_recommended", title: "推荐", width: 100, },
                    { title: "操作", align: "center", fixed: "right", templet: "#operationTpl" }
                ]],
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0,
                        "msg": res.msg, //解析提示文本
                        "count": res.data.count, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },
                done: function (res, curr, count) {
                    console.info(res, curr, count);

                }
            })
            table.on("toolbar(tableFilter)", function (obj) {
                switch (obj.event) {
                    case "add":
                        okLayer.open("新增分类", "{:addons_url('store://Category/categoryAdd')}", "90%", "90%", null, function () {
                            // location.reload();
                        })
                        break;
                    case "ref":
                        location.reload();
                        break;
                }
            });
            table.on("tool(tableFilter)", function (obj) {
                let data = obj.data;
                switch (obj.event) {
                    case "add":
                        layui.use(["okLayer"], function () {
                            let okLayer = layui.okLayer;
                            console.log(layer)
                            okLayer.open("新增分类", `{:addons_url('store://Category/categoryAdd')}?id=${data.id}`, "90%", "90%", null, function () {
                                // location.reload();
                            })
                        })
                        break;
                    case "upc":
                        layui.use(["okLayer"], function () {
                            let okLayer = layui.okLayer;
                            okLayer.open("修改分类", `{:addons_url('store://Category/categoryUpc')}?id=${data.id}`, "90%", "90%", null, function () {
                                // location.reload();
                            })
                        })
                        break;
                    case "del":
                        del(data.id);
                        break;
                }
            });
            function del(id) {
                layer.confirm('确认删除？(将会删除其子菜单，以及该菜单的商品绑定信息！建议删除前请先备份数据库)', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    okUtils.ajax("{:addons_url('store://Category/delete')}", "post", { id }, true).done(function (response) {
                        if (response.status === 200) {
                            okLayer.greenTickMsg(response.msg, function () {
                                location.reload();
                            })
                        }
                    }).fail(function (error) {
                        console.log(error)
                    });
                }, function () {

                });

            }
        });
    </script>

    <script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增分类</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="ref">刷新列表</button>
    </div>
</script>

    <script type="text/html" id="operationTpl">
    <input type="button"  lay-event="add" name="add" class="layui-btn layui-btn-normal layui-btn-sm"  value="新增">
    <input type="button"  lay-event="upc" name="upc" class="layui-btn layui-btn-sm"   value="修改">
    <input type="button"  lay-event="del" name="del" class="layui-btn layui-btn-danger layui-btn-sm"  value="删除">
</script>
</body>

</html>